<template>
  <div class="app-container">
    <el-button type="primary" style="margin-bottom:20px" @click="Create">创建</el-button>
    <el-table :data="pageData.Data" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='操作' width="195">
        <template slot-scope="scope">
         <a href='javascript:;' style="margin-right:5px;" v-if="$store.state.user.setListShow" @click="Edit(scope.row.ID)">编辑</a>
         <a href='javascript:;' v-if="scope.row.State==0" @click="Frozen(scope.row.ID)">禁用</a>
         <a href='javascript:;' v-if="scope.row.State==1" @click="Frozen(scope.row.ID)">解锁</a>
        </template>
      </el-table-column>
      <el-table-column label="系统账号">
        <template slot-scope="scope">
          {{scope.row.LoginName}}
        </template>
      </el-table-column>
      <el-table-column label="昵称">
        <template slot-scope="scope">
          <span>{{scope.row.NickName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.StateName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="末次登录IP">
        <template slot-scope="scope">
          <span>{{scope.row.LastLoginIp}}</span>
        </template>
      </el-table-column>
      <el-table-column label="末次登录时间">
        <template slot-scope="scope">
          <span>{{scope.row.LastLoginTime}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:20px;float:right">
      <el-pagination background :current-page="pageData.Page" :page-sizes="pageData.PageSizes" :page-size="pageData.PageSize" layout="total, sizes, prev, pager, next"
            :total="pageData.Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, FrozenUser } from '@/api/user'

export default {
  data() {
    return {
      pageData: {
        Page: 0,
        PageSize: 10,
        PageSizes: [10, 20, 50, 100],
        Total: 0,
        Data: null
      },
      listLoading: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleSizeChange(PageSize) {
      this.pageData.PageSize = PageSize
      this.fetchData()
    },
    handleCurrentChange(Page) {
      this.pageData.Page = Page
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      var input = {
        PageIndex: this.pageData.Page,
        PageSize: this.pageData.PageSize
      }
      // getList(input).then(response => {
      //   this.pageData.Page = response.Entity.Page
      //   this.pageData.Total = response.Entity.Total
      //   this.pageData.Data = response.Entity.Data
      //   this.listLoading = false
      // })
      this.$http.Post(sessionStorage.getList,{input:input}).then(response=>{
        this.pageData.Page = response.Entity.Page
        this.pageData.Total = response.Entity.Total
        this.pageData.Data = response.Entity.Data
        this.listLoading = false
      })
    },
    Create() {
      this.$router.push({ name: 'UserDetail', query: { id: null }})
    },
    Edit(ID) {
      this.$router.push({ name: 'UserDetail', query: { id: ID }})
    },
    Frozen(ID) {
      // FrozenUser(ID).then(response => {
      //   if (response.StatusCode === 0) {
      //     alert(response.Message)
      //     this.fetchData()
      //   } else {
      //     alert(response.Message)
      //   }
      // })
      this.$http.Post(sessionStorage.frozenList,{input:{ID: ID}}).then(response=>{
        if (response.StatusCode === 0) {
          // alert(response.Message)
          this.$message({
            message: response.Message,
            type: 'success'
          });
          this.fetchData()
        } else {
          // alert(response.Message)
          this.$message({
            message: response.Message,
            type: 'success'
          });
        }
      })
    }
  }
}
</script>
